<template>
	<div>
		<div class="title">热销推荐</div>
		<div class="item" v-for="item of recommendList" :key="item.id">
			<img :src="item.imgUrl">
			<div>
				<p>{{item.title}}</p>
				<p class="ellipsis">{{item.desc}}</p>
				<p>查看详情</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'homeRecommend',
		props:{
			recommendList:Array,
		},
	}
</script>

<style scoped>
.title{
	width: 100%;
	height: .8rem;
	line-height: .8rem;
	background-color: #eee;
	text-indent: .2rem;
}

.item{
	box-sizing: border-box;
	padding: .1rem;
	width: 100%;
	height: 1.9rem;
	border:1px solid #eee;
	display: flex;
	justify-content: flex-start;
}

.item>img{
	height: 1.7rem;
}

.item>div{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left:.3rem;
	min-width:0;
}

.item>div>p:first-child{
	font-size: .32rem;
}

.item>div>p:nth-child(2){
	color: #ccc;
}

.item>div>p:last-child{
	background-color: #ff9300;
	color: white;
	width: 1.5rem;
	height: .44rem;
	line-height: .44rem;
	text-align: center;
}




</style>